<template>
  <!-- 左右布局 -->
  <div class="centerWrapper" style="display: none;" :style="{display: 'block'}">
    <!-- 文章支持组件：如点赞、评论 -->
    <div class="article-suspended-panel">
      <div class="panel-btn">
        <div class="comment-btn comment-adjust">
          左边为点赞+评论按钮
        </div>
      </div>
    </div>

    <!-- 文章主体信息 -->
    <div class="main-container">
      <div class="article-area" v-if="postDetail != null">
        <div class="shadow">
          <!-- 文章内容、评论 -->
          <div class="article">
            <div class="article-info-box">
              <div class="author-name">
                {{ postDetail.account.nickname }}
              </div>
              <div class="meta-box">
                <div class="myTime">
                  {{ postDetail.created_at | toDate }}
                </div>
                <div class="views-count">阅读 {{ postDetail.watch }}</div>
              </div>
              <!-- <div class="avatar">
              <img src="../../static/avatar.jpg" alt="" />
            </div> -->
            </div>

            <!-- 文章标题 -->
            <div class="article-title">{{ postDetail.title }}</div>

            <!-- 正文 -->
            <div class="markdown-body" v-html="postDetail.content">
              <!-- {{  }} -->
            </div>

            <!-- 标签，比如城市 -->
            <div class="tag-list-box">
              <div class="tag-list">
                <div class="tag-list-title">文章标签</div>
                <div class="tag-title">
                  <div class="item">后端</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 广告语，宣传语 -->
          <div class="article-banner">
            <div>安装浏览器插件</div>
            <div class="banner-content">
              打开新标签页发现好内容，ztranscript、GitHub、Dribbble、ProductHunt
              等站点内容轻松获取。快来安装浏览器插件获取高质量内容吧！
            </div>
          </div>

          <!-- 评论与回复 -->
          <!-- <div class="comment-list-box"> -->

          <!-- 回复input组件 -->
          <div class="comment-form">
            <div class="form-box">
              <div class="rich-input">
                <el-input
                  placeholder="输入评论..."
                  v-model.trim="comment"
                  clearable
                >
                </el-input>
              </div>
              <div class="action-box">
                <span class="noticeBlock">
                  网络交流需要互相尊重
                </span>
                <div class="submitBlock">
                  <span class="submitSpan">
                    暂不支持多重回复
                  </span>
                  <button class="submit-btn" @click="addComments">
                    评论
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div v-if="comments.length > 0">
            <!-- 评论展示 -->
            <div class="comment" v-for="(item, i) in comments" :key="i">
              <!-- <div class="comment-divider-line"> -->
              <!-- 头像  × -->
              <!-- 评论楼层 (倒序)-->
              <div class="commentNumber">{{ comments.length - i }}</div>
              <!-- 内容 -->
              <div class="content-box">
                <div class="meta-box">
                  <div class="username">
                    <span class="name">{{ item.account.nickname }}</span>
                  </div>
                  <div class="position">后端开发 | 前端小白</div>
                </div>
                <div class="content">
                  <!-- 请问四川火锅辣么？我湖南人能接受么？ -->
                  {{
                    item.content == ""
                      ? "评论暂时无法显示图片..."
                      : item.content
                  }}
                </div>
                <div class="reply-stat">
                  <div class="reply-time">{{ item.diffTime }}</div>
                  <div class="action-box">
                    <img src="../../static/like.png" alt="" />
                    <div class="action">回复</div>
                  </div>
                </div>
              </div>
              <!-- </div> -->
            </div>
          </div>
          <!-- 空白评论展示 -->
          <div v-else>
            还没有人留下评论
          </div>
        </div>
      </div>

      <!-- 其他信息：如相关攻略 -->
      <div v-if="postDetail != null">
        <div class="sidebar">
          <div class="sidebar-block">
            <div class="block-title">
              关于作者
            </div>
            <div class="user-item">
              <div class="info-box"></div>
              <div class="name">{{ postDetail.account.nickname }}</div>
            </div>
            <div class="stat-item">
              <div class="content">
                <img src="../../static/like.png" /> 获得点赞 1,795
              </div>
              <div class="content">
                <img src="../../static/read.png" /> 获得点赞 1,795
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postDetail: null,
      comment: "",
      // 评论列表
      comments: []
    };
  },
  mounted() {
    // 获取文章详情
    var url = `/posts?id=${this.$route.query.id}`;
    var _this = this;
    this.$axios({
      url
    }).then(res => {
      console.log(res);
      _this.postDetail = res.data.data[0];
      // 获取评论
      _this.getComments();
    });
  },
  //过滤器
  filters: {
    // yyyy-MM-dd
    toDate(time) {
      // console.log(time + ",");
      // time = time * 1000
      let date = new Date(time);
      // console.log(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const formatTime = y + " 年 " + m + " 月 " + d + " 日";
      return formatTime;
    }
  },
  methods: {
    // 获取日期差
    diffTime(dateTimeStamp) {
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;

      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;

      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;

      var ans = "";
      if (parseInt(monthC) >= 1) {
        ans = parseInt(monthC) + "个月前";
      } else if (parseInt(dayC) > 1) {
        ans = parseInt(dayC) + "天前";
      } else if (parseInt(dayC) === 1) {
        ans = "昨天";
      } else if (parseInt(hourC) >= 1) {
        ans = parseInt(hourC) + "小时前";
      } else if (parseInt(minC) >= 1) {
        ans = parseInt(minC) + "分钟前";
      } else {
        ans = "刚刚";
      }
      return ans;
    },
    // 日期格式化
    dateFormat(dateData) {
      var date = new Date(dateData);
    },

    // 获取文章评论
    getComments() {
      var url = `/posts/comments?post=${this.postDetail.id}`;
      var that = this;
      this.$axios({
        url
      }).then(res => {
        console.log(res);
        that.comments = res.data.data;
        that.comments.forEach((element, index) => {
          // console.log(element + ", " + index);
          that.comments[index]["diffTime"] = that.diffTime(element.created_at);
          // console.log(element);
        });
      });
    },

    // 添加评论
    addComments() {
      var that = this;
      var url = "/comments";
      this.$axios({
        url,
        method: "POST",
        data: {
          content: that.comment,
          pics: [],
          post: that.postDetail.id
        },
        headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
        }
      }).then(res => {
        console.log("增加评论成功");
        // 重新请求评论信息
        that.getComments();
      });
    }
  }
};
</script>

<style lang="less">
// 评论展示
.comment {
  margin: 0 25px 10px 60px;
  padding: 0 0 15px 0;
  display: flex;

  .commentNumber {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    // border-radius: 50%;
  }

  .content-box {
    border-bottom: 1px solid #f1f1f1;
    // background-color: #f4f5f5;
    margin-left: 0.833rem;
    flex: 1 1 auto;

    .meta-box {
      display: flex;
      align-items: center;
      font-size: 1rem;
      line-height: 1.2;
      white-space: nowrap;
      .username {
        font-size: 1rem;
        font-weight: 400;
        flex: 1 1 auto;
        // width: 0;
        color: #333;

        .name {
          display: inline-block;
          vertical-align: top;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .position {
        color: #8a9aa9;
        font-size: 1rem;
        margin-left: 10px;
        // padding: 0 0 0 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 16rem;
        // max-width: 12rem;
      }
    }
    .content {
      margin-top: 0.55rem;
      font-size: 1rem;
      line-height: 1.833rem;
      word-wrap: break-word;
      // white-space: pre-wrap;
      color: #505050;
      overflow: hidden;
    }

    .reply-stat {
      padding: 0 0 12px 0;
      display: flex;
      margin-top: 7px;
      justify-content: space-between;
      font-weight: 400;
      .reply-time {
        font-size: 0.9rem;
        color: #8a9aa9;
        cursor: default;
      }
      .action-box {
        padding: 0 0 0 300px;
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        font-size: 0.9rem;
        min-width: 8.8rem;
        color: #8a93a0;
        user-select: none;
        img {
          width: 1.1rem;
          height: 1.1rem;
        }
        .action {
          display: flex;
          align-items: center;
          // margin-left: 0.5rem;
          cursor: pointer;
        }
      }
    }
  }
}

.button,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #007fff;
  color: #fff;
  border-radius: 2px;
  border: none;
  padding: 0.5rem 1.3rem;
  outline: none;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}

.comment-form {
  margin: 0 1.666rem 1.333rem;
  display: flex;
  position: relative;
  padding: 1rem 1.333rem;
  background-color: #fafbfc;
  border-radius: 3px;

  .form-box {
    flex: 1 1 auto;
    position: relative;

    .rich-input {
      position: relative;
      padding: 0.6rem 1rem;
      font-size: 1.083rem;
      line-height: 1.7;
      color: #17181a;
      outline: none;
      min-height: 1.3em;
    }

    .action-box {
      display: flex;
      align-items: center;
      margin: 0.65rem 0 0;

      .noticeBlock {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        font-size: 1.083rem;
        color: #027fff;
        cursor: pointer;
        margin-left: 20px;
      }

      .submitBlock {
        flex: 0 0 auto;
        margin-left: auto;

        .submitSpan {
          color: #c2c2c2;
          margin-right: 8px;
          font-size: 13px;
        }

        .submit-btn {
          flex: 0 0 auto;
          margin-left: auto;
          padding: 0.5rem 1.3rem;
          font-size: 1rem;
          color: #fff;
          background-color: #027fff;
          border-radius: 2px;
          cursor: pointer;
        }
      }
    }
  }
}

.stat-item {
  margin-bottom: 0.8rem;
  padding: 0 1.3rem;
  .content {
    // align-content: center;
    font-size: 1rem;
    color: #000;
    img {
      position: relative;
      top: 3px;
      width: 20px;
      height: 20px;
      // background-size: 100%;
    }
  }
}

.user-item {
  padding: 1.3rem;
  display: flex;
  align-items: center;
  .info-box {
    // flex: 1 1 auto;
    min-width: 0;
  }
  .name {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.block-title {
  padding: 1rem 1.3rem;
  font-size: 1.16rem;
  color: #333;
  border-bottom: 1px solid hsla(0, 0%, 58.8%, 0.1);
}

.article-banner {
  margin-bottom: 2.5rem;
  padding: 0 0 0 2rem;
  border-left: 6px solid #ddd;

  .banner-title {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #007fff;
  }

  .banner-content {
    margin-top: 0.2rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #909090;
  }
}

.item {
  display: flex;
  align-items: center;
  margin: 0 0.667rem 1rem 0;
  padding: 0 0.667rem;
  border-radius: 2px;
  background-color: #fafafa;
  color: #4e5969;
}

.tag-list {
  display: flex;
  font-size: 1.167rem;
  line-height: 2.286;
  margin-right: 1.42rem;
  flex-shrink: 0;
  align-items: center;
}

.tag-title {
  white-space: nowrap;
  line-height: 2.667rem;
}

.tag-list-title {
  flex-shrink: 0;
  margin-right: 1rem;
  font-weight: 500;
  position: relative;
  top: -5px;
}

.tag-list-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e6eb;
}

.markdown-body {
  word-break: break-word;
  line-height: 1.75;
  font-weight: 400;
  font-size: 15px;
  overflow-x: hidden;
  color: #333;
}

.article-title {
  margin: 0.67em 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}

.shadow {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}

.views-count {
  margin-left: 0.5em;
}

.myTime {
  // font-size: 1.1rem;
}

.meta-box {
  font-size: 1.1rem;
  color: #909090;
  margin-top: 0.25rem;
  display: flex;
}

.author-name {
  display: inline-block;
  width: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
}

.article-info-box {
  min-width: 0;
  flex-grow: 1;
  flex: 1;
  height: 43px;
  display: block;
}

.sidebar {
  background-color: #ffffff;
  height: 60px;
  position: sticky;
  top: 20px;
  left: 20px;
  width: 15rem;
}

.panel-btn {
}

.sidebar-block {
  background-color: #fff;
  position: relative;
  margin-bottom: 1.5rem;
  border-radius: 2px;
  padding: 0 0 5px 0;
}

.article {
  margin-bottom: 3rem;
  padding: 2rem 0 0;
}

.article-area {
  position: relative;
  width: 700px;
  max-width: 100%;
  background-color: #ffffff;
  border-radius: 2px;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  margin: 0 20px 0 0;
  padding: 0 15px;
}

.main-container {
  display: flex;
  width: 1100px;
  // height: 600px;
  margin: 0 auto;
  margin-top: 1.767rem;
  padding: 0 0 8rem 10rem;
}

.article-suspended-panel {
}

.centerWrapper {
  background-color: #f4f5f5;
}
</style>
